<template>
	<view class="container">
		<!-- 公司信息 -->
		<view class="company">
			<van-image width="80" height="80" src="https://img.yzcdn.cn/vant/cat.jpeg" round />
			<view class="name">一诺惠洁家政</view>
		</view>
		<!-- 用户协议以及按钮 -->
		<view class="user_login">
			<van-checkbox :value="checked" @change="onChange" icon-size="15">
				<view class="deal">
					阅读并同意
					<text>用户协议</text>
					、
					<text>隐私政策</text>
				</view>
			</van-checkbox>
			<view class="phone_login">
				<van-button type="info" size="small" round block>手机号快捷登录</van-button>
			</view>
		</view>
		<!-- 其他登录方式 -->
		<view class="hit">
			<text>其他登陆方式</text>
			<text class="iconfont icon-shouji" @click="loginTo"></text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const checked = ref(false);
const onChange = (e) => {
	checked.value = e.detail;
};
//条转到其他登陆方式
const loginTo = () => {
	uni.navigateTo({
		url: '/pages/loginTo/loginTo'
	});
};
</script>

<style lang="scss" scoped>
.container {
	.company {
		margin: 60rpx 0 100rpx;
		text-align: center;
		image {
			display: block;
		}
		view {
		}
	}
	.user_login {
		:deep(.van-checkbox) {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
		}
		.deal {
			text {
				color: $uni-color-primary;
			}
		}
		.phone_login {
			width: 70%;
			margin: 40rpx auto;
		}
	}
	.hit {
		position: absolute;
		bottom: 60rpx;
		left: 50%;
		text-align: center;
		transform: translateX(-50%);
		text {
			font-size: 26rpx;
			display: block;
		}
		.iconfont {
			margin-top: 20rpx;
			font-size: 80rpx;
			color: $uni-color-primary;
		}
	}
}
</style>
